<template>
  <div id="canvas-container">
    <canvas id="waveCanvas" ref="waveCanvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      context: null,
      width: 0,
      height: 0,
      // 第一层波浪的相关参数
      wave1: {
        color: '#f0f0f0',
        alpha: 0.8,
        amplitude: 30, // 振幅，控制波浪起伏的高度
        frequency: 0.02, // 频率，控制波浪的疏密程度
        speed: 0.05, // 移动速度，控制波浪流动的快慢
        phase: 0 // 相位，用于控制波浪的起始位置
      },
      // 第二层波浪的相关参数
      wave2: {
        color: '#e9f1f8',
        alpha: 0.6,
        amplitude: 20,
        frequency: 0.03,
        speed: 0.03,
        phase: 0
      }
    };
  },
  mounted() {
    this.initCanvas();
    this.drawWaves();
    this.animateWaves();
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.waveCanvas;
      this.canvas.width = document.documentElement.clientWidth;
      this.canvas.height = 300;
      this.context = this.canvas.getContext('2d');
      this.width = this.canvas.width;
      this.height = this.canvas.height;
    },
    drawWaves() {
      this.drawWave(this.wave1);
      this.drawWave(this.wave2);
    },
    drawWave(wave) {
      this.context.beginPath();
      this.context.moveTo(0, this.height / 2);
      for (let x = 0; x < this.width; x++) {
        const y = Math.sin(x * wave.frequency + wave.phase) * wave.amplitude + this.height / 2;
        this.context.lineTo(x, y);
      }
      this.context.lineTo(this.width, this.height);
      this.context.lineTo(0, this.height);
      this.context.closePath();
      this.context.fillStyle = wave.color;
      this.context.globalAlpha = wave.alpha;
      this.context.fill();
    },
    animateWaves() {
      const _this = this;
      setInterval(() => {
        _this.context.clearRect(0, 0, _this.width, _this.height);
        _this.wave1.phase += _this.wave1.speed;
        _this.wave2.phase += _this.wave2.speed;
        _this.drawWaves();
      }, 30);
    }
  }
};
</script>

<style>
canvas {
  width: 100%;
  height: 300px;
  vertical-align: top;
  /* backdrop-filter: blur(5px); */
  /* border-radius: 20px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 640px) {
  canvas {
    height: 200px;
  }
}
</style>